<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { GameSingleReward } from '@/types/game-single-reward';
  import RewardEditor from '@/views/game/components/single-reward/reward-editor.vue';
  import { deleteReward, getRewardList } from '@/api/game-single-reward';
  import { Message, Modal } from '@arco-design/web-vue';
  import { api as viewerApi } from 'v-viewer';

  const props = defineProps<{
    gameId: string;
    courseId: string;
  }>();

  const list = ref<GameSingleReward[]>([]);
  const getData = async () => {
    const res = await getRewardList(props.gameId);
    list.value = res.data.data || [];
  };

  const editorConfig = ref<{
    visible: boolean;
    singleReward?: GameSingleReward;
  }>({
    visible: false,
  });

  const handleAdd = () => {
    editorConfig.value = {
      visible: true,
    };
  };

  onMounted(() => {
    getData();
  });

  const handleEditDone = async (refresh: boolean) => {
    editorConfig.value = {
      visible: false,
    };
    if (refresh) {
      await getData();
    }
  };

  const handleDelete = (item: GameSingleReward) => {
    Modal.confirm({
      title: '提示',
      content: '确认删除该奖项？',
      async onBeforeOk() {
        await deleteReward(item.id);
        getData();
      },
    });
  };

  const beginPreview = (item: GameSingleReward) => {
    const pics = JSON.parse(item.pics || '[]') as string[];
    if (pics.length > 0) {
      viewerApi({
        images: pics,
        options: {
          navbar: false,
        },
      });
    } else {
      Message.warning('还未上传');
    }
  };
</script>

<template>
  <div>
    <a-row :gutter="[12, 12]">
      <a-col v-for="item in list" :key="item.id">
        <div class="item">
          <div class="item-header">
            <div class="item-name">{{ item.name }}</div>
            <a-space>
              <a-button
                @click="editorConfig = { visible: true, singleReward: item }"
              >
                <template #icon><icon-edit /></template>
                修改
              </a-button>
              <a-button @click="beginPreview(item)">
                <template #icon><icon-image /></template>
                查看获奖图片
              </a-button>
              <a-button @click="handleDelete(item)">
                <template #icon><icon-delete /></template>
                删除该奖项
              </a-button>
            </a-space>
          </div>
          <div>
            <a-space>
              <a-tag>奖项个数：{{ item.count }}</a-tag>
            </a-space>
          </div>
        </div>
      </a-col>

      <a-col>
        <a-button type="primary" @click="handleAdd">
          <template #icon><icon-plus /></template>
          添加
        </a-button>
      </a-col>
    </a-row>

    <RewardEditor
      v-if="editorConfig.visible"
      :game-id="gameId"
      :course-id="courseId"
      :single-reward="editorConfig.singleReward"
      @close="handleEditDone"
    />
  </div>
</template>

<style lang="less" scoped>
  .item {
    padding: 12px;
    border-radius: 4px;
    border: 1px solid var(--color-border-2);

    &-header {
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    &-name {
      font-size: 16px;
      font-weight: 600;
    }
  }
</style>
